import React from 'react'
import PropTypes from 'prop-types'
import { routerRedux } from 'dva/router'
import { connect } from 'dva'
import { Row, Col, Button, Popconfirm } from 'antd'
import List from './List'
import Filter from './Filter'
import Modal from './Modal'

const TestPlanConfig = ({ location, dispatch, testPlanConfig, loading }) => {
  const { list, pagination, currentItem, modalVisible, modalType, selectedRowKeys,productId,level,targetKeylist} = testPlanConfig
  // const { pageSize } = pagination
  let productList  = list.productList
  let initProductId
  for(let k in productList){
    if(k==0){
      initProductId=productList[k].pk
    }

  }
  const modalProps = {
    item: modalType === 'create' ? {} : currentItem,
    // visible: modalVisible,
    // maskClosable: false,
    level:level,
    targetKeylist:targetKeylist,
    productId:productId?productId:currentItem.fields?currentItem.fields.product_name:initProductId,
    confirmLoading: loading.effects['testPlanConfig/update'],
    title: `${modalType === 'create' ? '新增测试计划' : '编辑测试计划'}`,
    wrapClassName: 'vertical-center-modal',
    productList:productList,
    suiteList:list.suiteList,
    onOk (data) {
      dispatch({
        type: `testPlanConfig/${modalType}`,
        payload: data,
      })
    },
    onCancel () {
      dispatch({
        type: 'testPlanConfig/hideModal',
      })
    },
    suiteChangeFn(data){

      dispatch({
        type: 'testPlanConfig/changeSuite',
        payload: data,
      })
    },
    changeTarget(targetKeys){
      dispatch({
        type: 'testPlanConfig/changeTarget',
        payload: {
          targetKeylist:targetKeys,
        },
      })
    }
  }

  const listProps = {
    dataSource: list.data,
    loading: loading.effects['testSuiteConfig/query'],
    pagination,
    location,
    productList:productList,
    suiteList:list.suiteList,
    // isMotion,
    onChange (page) {
      const { query, pathname } = location
      dispatch(routerRedux.push({
        pathname,
        query: {
          ...query,
          page: page.current,
          pageSize: 10,
        },
      }))
    },
    onDeleteItem (id) {
      dispatch({
        type: 'testPlanConfig/delete',
        payload: id,
      })
    },
    onEditItem (item) {
      dispatch({
        type: 'testPlanConfig/showModal',
        payload: {
          modalType: 'update',
          currentItem: item,
          targetKeylist:item.fields.suite_names.split(',')

        },
      })
    },
    onCheckProduct (id) {
      dispatch({
        type: 'testPlanConfig/checkProduct',
        payload: id,
      })
    },
    rowSelection: {
      selectedRowKeys,
      onChange: (keys) => {
        dispatch({
          type: 'testPlanConfig/updateState',
          payload: {
            selectedRowKeys: keys,
          },
        })
      },
    },
  }

  const filterProps = {
    // isMotion,
    filter: {
      ...location.query,
    },
    onFilterChange (value) {
      dispatch(routerRedux.push({
        pathname: location.pathname,
        query: {
          ...value,
          page: 1,
          pageSize,
        },
      }))
    },

    onAdd () {
      dispatch({
        type: 'testPlanConfig/showModal',
        payload: {
          modalType: 'create',
        },
      })
    },

  }


  return (
    <div className="content-inner">
      {modalVisible && <Modal {...modalProps} />}

      {!modalVisible && <Filter {...filterProps} />}
      {!modalVisible &&<List {...listProps} />}
    </div>
  )
}

TestPlanConfig.propTypes = {
  testSuiteConfig: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({ testPlanConfig, loading }) => ({ testPlanConfig, loading }))(TestPlanConfig)
